<template>
  <main>
    <div class="left">
      <div class="left1">
        <iframe
          allowtransparency="true"
          frameborder="0"
          width="142"
          height="200"
          scrolling="no"
          src="//tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=0&v=1&d=1&bd=1&k=ffffff&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=71850&w=142&h=200&align=center"
        ></iframe>
        <!-- 日历/> -->
        <div class="calendar">
          <div class="morning">早上好，<span>金凯瑞</span></div>
          <div class="title">
            <span>美好的一天从工作开始</span>
            <span class="data"
              >今天是{{ value.getFullYear() }}年<span
                >{{ value.getMonth() + 1 }}月{{ value.getDate() }}日</span
              ></span
            >
          </div>
          <div class="up"></div>
          <div class="day">
            <el-tag class="ml-2" type="success" color="#F5F5F5">
              <div>21</div>
              <div>周一</div>
            </el-tag>
            <el-tag class="ml-2" type="success" color="#F5F5F5">
              <div>22</div>
              <div>周二</div>
            </el-tag>
            <el-tag class="ml-2" type="success" color="#F5F5F5">
              <div>26</div>
              <div>周六</div>
            </el-tag>
            <el-tag class="ml-2" type="success" color="#F5F5F5">
              <div>27</div>
              <div>周日</div>
            </el-tag>
          </div>

          <div class="down"></div>
        </div>
      </div>
      <!-- 左边第二个 -->
      <div class="left2">
        <div class="title">待处理事务</div>
        <div class="dispose">
          <el-badge
            v-for="item in describeDate"
            :key="item.id"
            class="item"
            :value="item.top"
            :hidden="!item.top"
          >
            <el-icon :size="60" color="#409EFC">
              <tickets />
            </el-icon>
            <div>{{ item.title }}</div>
            <el-button round size="small" :type="item.type"
              >{{ item.num }}个
            </el-button>
          </el-badge>
        </div>
      </div>
      <!-- 左边第三个 -->
      <div class="left3">
        <div class="left3-1">
          <span style="font-size: 18px; padding: 10px">用户总览</span>
          <div class="title">
            <el-switch
              v-model="value1"
              inline-prompt
              active-text="成"
              inactive-text="30个"
              size="large"
            >
            </el-switch>
            <el-switch
              v-model="value2"
              inline-prompt
              active-text="览"
              inactive-text="10个"
              size="large"
            >
            </el-switch>
            <el-switch
              v-model="value3"
              inline-prompt
              active-text="藏"
              inactive-text="50个"
              size="large"
            >
            </el-switch>
          </div>
        </div>

        <el-table :data="useDate" height="300" stripe>
          <el-table-column prop="num" label="订单编号" />
          <el-table-column prop="time" label="提交时间" />
          <el-table-column prop="money" label="订单金额" />
          <el-table-column prop="pay" label="支付方式" />
          <el-table-column prop="state" label="订单状态" />
        </el-table>
      </div>
    </div>
    <!-- 右边界面 -->
    <div class="right">
      <div class="right1">
        <div style="font-size: 18px; padding: 10px">公告栏</div>
        <el-table
          :data="tableDate"
          height="200"
          :stripe="true"
          :show-header="false"
          :highlight-current-row="true"
          size="small"
        >
          <el-table-column prop="title" />
          <el-table-column prop="time" />
        </el-table>
      </div>
      <div class="right2">
        <div class="right2-1" style="padding: 10px">
          <div style="font-size: 18px">近期汇总</div>
          <div class="right2-11">
            <el-tag
              class="ml-3"
              type="success"
              v-for="(item, index) in reportDate"
              :key="item.id"
              color="#F5F5F5"
              @mouseover="fontColor(index)"
              @mouseout="fontColor1"
            >
              <img :src="item.url" alt="" />
              <div class="title">{{ item.title }}</div>
              <div class="num" :class="{ active: active === index }">
                {{ item.num }}
              </div>
            </el-tag>
          </div>
        </div>
        <div class="right2-2">
          <div style="font-size: 18px">商品信息</div>
          <div class="right2-22">
            <el-tag
              class="ml-3"
              type="success"
              v-for="item in CommDate"
              :key="item.id"
              color="#F5F5F5"
            >
              <img :src="item.url" alt="" />
              <div class="title">{{ item.title }}</div>
              <div class="num">
                {{ item.message }}
              </div>
            </el-tag>
          </div>
        </div>
      </div>
      <div class="right3">
        <div style="font-size: 18px">近期文件</div>
        <div class="right3-1">
          <span>本周</span>
          <el-dropdown>
            <span class="el-dropdown-link">
              按最新时间
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>本月</el-dropdown-item>
                <el-dropdown-item>上月</el-dropdown-item>
                <el-dropdown-item>上季度</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <!--  -->
        <el-scrollbar height="100px">
          <div class="doc" v-for="item in docData" :key="item.id">
            <div class="doc-1">
              <img src="../../../assets/images/doc.png" alt="" />
              <div class="doc-11">
                <p>{{ item.title }}.doc</p>
                <span>金凯瑞 | </span>
                <span>商品上架组</span>
              </div>
            </div>
            <div class="doc-2">
              <p>{{ item.timeM }}月{{ item.timeD }}日</p>
              <span>{{ item.num }}k</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </main>
</template>
<script>
import {
  ElTag,
  ElBadge,
  ElIcon,
  ElButton,
  ElSwitch,
  ElTable,
  ElTableColumn,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElScrollbar,
} from "element-plus";
import { Tickets, ArrowDown } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import dispose from "../../../mock/indexDispose";
import table from "../../../mock/indexTable";
import report from "../../../mock/indexReport";
import DocDate from "../../../mock/indexDoc";
import userDate from "../../../mock/indexUser";
export default {
  setup() {
    const value = ref(new Date());
    const value1 = ref(true);
    const value2 = ref(true);
    const value3 = ref(true);
    const active = ref(-1);
    let describeDate = ref([
      {
        id: 1,
        title: "待提交商品",
        type: "danger",
      },
      {
        id: 2,
        title: "待评价商品",
        type: "primary",
      },
      {
        id: 3,
        title: "待付款商品",
        type: "primary",
      },
      {
        id: 4,
        title: "待发货订单",
        type: "danger",
      },
      {
        id: 5,
        title: "待收货订单",
        type: "primary",
      },
      {
        id: 6,
        title: "退款中订单",
        type: "danger",
      },
    ]);
    // 右侧近期汇总数据
    let reportDate = ref([
      {
        id: 1,
        url: require("@/assets/images/订单量.png"),
        title: "今日订单量",
      },
      {
        id: 2,
        url: require("@/assets/images/今日销售额.png"),
        title: "今日销售额",
      },
      {
        id: 3,
        url: require("@/assets/images/昨日销售额.png"),
        title: "昨日销售额",
      },
      {
        id: 4,
        url: require("@/assets/images/近期销售额.png"),
        title: "近期销售额",
      },
    ]);
    // 右边数据
    let reportMassage = ref([]);
    onMounted(async () => {
      let res = await report.getData();
      reportMassage.value = res.data;
      reportDate.value.forEach((item) => {
        reportMassage.value.forEach((item1) => {
          if (item.id == item1.id) {
            item.num = item1.num;
            item.message = item1.message;
          }
        });
      });
    });
    const fontColor = (i) => {
      active.value = i;
    };
    const fontColor1 = () => {
      active.value = -1;
    };
    // 右侧商品信息数据
    let CommDate = ref([
      {
        id: 1,
        url: require("@/assets/images/全部商品.png"),
        title: "全部商品",
      },
      {
        id: 2,
        url: require("@/assets/images/已上架.png"),
        title: "已上架",
      },
      {
        id: 3,
        url: require("@/assets/images/已下架.png"),
        title: "已下架",
      },
      {
        id: 4,
        url: require("@/assets/images/库存紧张.png"),
        title: "库存紧张",
      },
    ]);
    let CommMassage = ref([]);
    onMounted(async () => {
      let res = await report.getData();
      CommMassage.value = res.data;
      CommDate.value.forEach((item) => {
        CommMassage.value.forEach((item1) => {
          if (item.id == item1.id) {
            item.num = item1.num;
            item.message = item1.message;
          }
        });
      });
    });

    // 左方数据
    let data = ref("");
    onMounted(async () => {
      const res = await dispose.getData();
      data.value = res.data;

      describeDate.value.forEach((item) => {
        data.value.forEach((item1) => {
          if (item.id == item1.id) {
            item.num = item1.num;
            item.top = item1.top;
          }
        });
      });
    });
    // 左下方数据
    let useDate = ref([]);
    onMounted(async () => {
      const res = await userDate.getData();
      useDate.value = res.data;
    });

    // 右上方数据
    let tableDate = ref([]);
    onMounted(async () => {
      const res = await table.getData();
      tableDate.value = res.data;
    });

    let docData = ref([]);
    onMounted(async () => {
      const res = await DocDate.getData();
      docData.value = res.data;
    });

    return {
      value,
      value1,
      value2,
      value3,
      describeDate,
      tableDate,
      reportDate,
      active,
      fontColor,
      fontColor1,
      CommDate,
      docData,
      useDate,
    };
  },
  components: {
    ElTag,
    ElBadge,
    ElIcon,
    Tickets,
    ElButton,
    ElSwitch,
    ElTable,
    ElTableColumn,
    ArrowDown,
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
    ElScrollbar,
  },
};
</script>

<style lang="less" scoped>
main {
  display: flex;
  height: 100%;
  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    .left1 {
      flex: 1;
      display: flex;
      iframe {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .calendar {
        flex: 1;
        padding: 10px;
        .morning {
          font-size: 16px;
          margin-bottom: 5px;
          span {
            color: #00adff;
          }
        }
        .data {
          color: #999999;
          span {
            color: #333;
            font-size: 14px;
            font-weight: 700;
          }
        }
        .title {
          display: flex;
          justify-content: space-between;
        }
        .day {
          display: flex;
          .ml-2 {
            flex: 1;
          }
        }
        .up {
          width: 100%;
          height: 20px;
          background-color: #eeecec;
          border-radius: 20px;
          margin-top: 20px;
        }
        .down {
          width: 100%;
          height: 20px;
          background-color: #eeecec;
          border-radius: 20px;
        }
      }
    }
    .left2 {
      flex: 1;
      .title {
        font-size: 18px;
        margin-bottom: 20px;
      }
      .dispose {
        display: flex;
        .el-badge {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          div {
            margin-top: 10px;
            margin-bottom: 10px;
          }
        }
        /deep/.el-badge__content.is-fixed {
          right: 30px;
          top: 4px;
        }
      }
    }
    .left3 {
      flex: 1;
      margin-top: 25px;
      .left3-1 {
        display: flex;
        align-items: center;
      }
      .el-switch {
        margin-left: 30px;
      }
    }
  }
  .el-tag {
    line-height: 2;
    height: 120px;
    padding: 5px;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    .right1 {
      flex: 1;
      /deep/.el-table_1_column_2 {
        display: flex !important;
        justify-content: flex-end !important;
      }
    }
    .right2 {
      flex: 1;
      display: flex;
      flex-direction: column;
      .right2-1 {
        flex: 1;
        margin-right: 10px;
        .right2-11 {
          display: flex;
          text-align: center;
          img {
            width: 30px;
            height: 30px;
          }
          .title {
            color: #666666;
          }
          .num {
            color: #333333;
            font-size: 18px;
            font-weight: 700;
          }
          .ml-3 {
            margin-top: 20px;
            margin-right: 10px;
            flex: 1;
            border-radius: 20px;
          }
        }
      }
      .right2-2 {
        flex: 1;
        padding: 10px;
        .right2-22 {
          display: flex;
          text-align: center;
          /deep/.el-tag__content:hover {
            background-color: #00adff;
            border-radius: 10px;
            box-shadow: 3px -3px 3px 5px #00adff;
          }
          img {
            width: 30px;
            height: 30px;
          }
          .title {
            color: #666666;
          }
          .num {
            color: #333333;
            font-size: 18px;
            font-weight: 700;
          }
          .ml-3 {
            margin-top: 20px;
            margin-right: 10px;
            flex: 1;
            border-radius: 20px;
          }
        }
      }
    }
    .right3 {
      // flex: 1;
      // background-color: lightgray;
      padding: 10px;
      .example-showcase .el-dropdown-link {
        cursor: pointer;
        color: var(--el-color-primary);
        display: flex;
        align-items: center;
      }
      .el-dropdown {
        font-size: 12px;
      }
      .right3-1 {
        display: flex;
        justify-content: space-between;

        // /deep/.el-scrollbar {
        //   width: 100%;
        // }
      }
      .doc {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .doc-1 {
          display: flex;
          align-items: center;
          img {
            width: 30px;
            height: 40px;
            margin-right: 5px;
          }
          p {
            font-size: 14px;
            font-weight: 700;
          }
        }
        .doc-2 {
          display: flex;
          flex-direction: column;
          align-items: center;
          p {
            margin-bottom: 5px;
          }
        }
      }
    }
  }
}
/deep/.el-scrollbar__view {
  width: 500px;
}
.active {
  color: #00adff !important;
  // transform-style: preserve-3d;
  // transform: translate3d(10, 10, 20);
}
</style>
